<template>
  <div class="ranking">
    <div class="banxin tanxin ranking_tou">
      <div class="ranking_l">
        <div class="ranking_l_t">
          <h3>云音乐特色榜</h3>
          <Tese :list="yunlist" />
        </div>
        <div class="ranking_l_t">
          <h3>全球媒体榜</h3>
          <Tese :list="allmtlist" />
        </div>
      </div>
      <div class="ranking_r">
        <Teseleirong :listxx="xqgedanxx" :list="xqgedangequ" />
      </div>
    </div>
  </div>
</template>

<script>
import Tese from "@/components/ranking/Tese.vue";
import Teseleirong from "@/components/ranking/Teseleirong.vue";
import { Allbangdan, Gedanxiangqing, Allgequ } from "@/request/api";
export default {
  data() {
    return {
      yunlist: [],
      allmtlist: [],
      //   刚进来的详情歌单id
      gedanid: 19723756,
      //   详情歌单信息
      xqgedanxx: [],
      //   详细歌单歌曲
      xqgedangequ: [],
      //   时间
      time: [],
    };
  },
  methods: {
    // 获取详情歌单公共组件
    getgedan(id) {
      Gedanxiangqing(id).then((res) => {
        if (res.data.code === 200) {
          this.xqgedanxx = res.data.playlist;
        }
      });
      //   100首歌
      Allgequ(id).then((res) => {
        if (res.data.code === 200) {
          this.xqgedangequ = res.data.songs;
        }
      });
    },
  },

  created() {
    //   左边榜单
    Allbangdan().then((res) => {
      if (res.data.code === 200) {
        let arr = res.data.list.map((item, index) => {
          return index <= 3 ? item : null;
        });
        arr = arr.filter((item) => {
          return item !== null;
        });
        let arr2 = res.data.list.map((item, index) => {
          return index >= 4 ? item : null;
        });
        arr2 = arr2.filter((item) => {
          return item !== null;
        });
        this.yunlist = arr;
        this.allmtlist = arr2;
        this.gedanid = arr[0].id;
      }
      // 歌单详情
      this.getgedan(this.gedanid);
    });
  },
  components: {
    Tese,
    Teseleirong,
  },
};
</script>
 
<style lang = "less" scoped>
@import "@/assets/base.less";

.ranking {
  .ranking_tou {
    justify-content: flex-start;
    .ranking_l {
      padding-top: 30px;
      margin-left: 100px;
      border-left: 1px solid #333;
      border-right: 1px solid #333;
      background-color: #fff;
      .ranking_l_t {
        h3 {
          margin-top: 20px;
          padding-left: 20px;
          padding-bottom: 10px;
        }
      }
    }
    .ranking_r {
      margin-left: 30px;
    }
  }
}
</style>